<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
        <link href="../img/icon.ico" rel="shortcut icon"/>
		<link rel="stylesheet" href="../layui/css/layui.css" />
        <link rel="stylesheet" href="../css/element.min.css?1" />
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_6epkjgfdbv9.css">
        <link rel="stylesheet" href="../css/reset.css?3123">
        <link rel="stylesheet" href="../css/setlayui.css?12">
        <link rel="stylesheet" href="../css/viewer.min.css">
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript" src="../js/element.min.js"></script>
        <script src="../js/viewer.min.js"></script>
	</head>
	<body>
        <div id="app" class="page-container" style="display: none;" v-show="showApp">
            <div class="table_box" ref="tablebox">
                <el-table 
                    :data="tableData" 
                    :row-class-name="tableRowClassName"
                    height="100%" 
                    border
                    :cell-style="{background:'#fff'}"
                    ref="multipleTable"
                    header-row-class-name="table_th" 
                    style="width: 100%">

					<el-table-column prop="typeid" label="序号" align="center" width="50"> </el-table-column>

					<el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip min-width="124">
                    </el-table-column>

					<el-table-column prop="idcard" label="身份证号" align="center" show-overflow-tooltip min-width="110">
                    </el-table-column>

					<el-table-column prop="phone" min-width="120" label="手机号" align="center" show-overflow-tooltip>
                    </el-table-column>

					<el-table-column prop="createtime" width="160" label="离职时间" align="center" show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column prop="remark" min-width="120" label="备注" align="center" show-overflow-tooltip>
                    </el-table-column>
				</el-table>
            </div>
            <div class="pagination_box" ref="paginations">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageindex" :page-sizes="[20, 100, 200, 300, 400]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totals"> </el-pagination>
            </div>
            <div class="hidden_box">
                <input id="publicValue" value="" type="text">
            </div>
        </div>
		<script src="../js/public.js?1234"></script>
		<script>
			var layer = layui.layer
			var vm = new Vue({
				el: '#app',
				data() {
					return {
                        showApp: false,
                        pageindex: 1,
                        pagesize: 20,
                        totals: 0,
                        tableData: [],
                        selected: []
					};
				},
				methods: {
                    dismissal () {
                        var that = this
                        if (this.selected.length == 0) {
                            this.$message({
                                message: '请选择一条数据',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        this.$confirm('是否确认辞退此员工?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            xLoading(true, '正在加载')
                            $.ajax({
                                type: 'post',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                url: baseUrl + '/ConstructionPlan/DismissUser',
                                data: JSON.stringify({
                                    rybh: that.selected[0].rybh,
                                }),
                                dataType: 'json',
                                success: function(res) {
                                    xLoading(false)
                                    if (!res.success) {
                                        that.$message({
                                            message: res.msg ? res.msg : '程序错误，请重试',
                                            type: 'error'
                                        });
                                        return false;
                                    }
                                    that.$message({
                                        message: '已辞退',
                                        type: 'warning',
                                        duration: 1000
                                    });
                                }
                            });
                        }).catch(() => {
                                
                        });
                    },
                    addRy () {
                        var that = this
                        layer.open({
                            type: 2,
                            title: '添加人员',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            // area: ['56.7%', '89.8%'],
                            area: ['42.91%', '30.55%'],
                            content: 'add.html?' + new Date().getTime(),
                            end: function() {
                                that.getCgjhListData()
                            }
                        });
                    },
                    editRy () {
                        var that = this
                        if (this.selected.length == 0) {
                            this.$message({
                                message: '请选择一条数据',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        layer.open({
                            type: 2,
                            title: '修改人员',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            // area: ['56.7%', '89.8%'],
                            area: ['42.91%', '30.55%'],
                            content: 'edit.html?rybh=' + this.selected[0].rybh + '&' + new Date().getTime(),
                            end: function() {
                                that.getCgjhListData()
                            }
                        });
                    },
                    // 斑马线
					tableRowClassName(value) {
						var classname = '';
						if  (value.row.typeid % 2 > 0) {
						    classname = 'success-row';
						} else if (value.row.typeid % 2 === 0) {
							classname = 'warning-row';
                        }
                        if (value.row.typeid === this.selectid) {
                            classname = classname + ' selected-row';
                        }
						return classname;
                    },
                    selectall () {
                        this.$refs.multipleTable.clearSelection();
                    },
                    select(selection, row) {
                        if (selection.length > 1) {
                            var del_row = selection.shift()
                            for (var i = 0; i < this.tableData.length; i++) {
                                if (del_row.typeid == this.tableData[i].typeid) {
							        this.$refs.multipleTable.toggleRowSelection(this.tableData[i], false);
                                }
                            }
                        }
                    },
                    // 点击某一行选择
					rowclick(row, column, event) {
						this.$refs.multipleTable.clearSelection();
						if (row) {
                            for (var i = 0; i < this.tableData.length; i++) {
                                if (row.typeid == this.tableData[i].typeid) {
							        this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);
                                }
                            }
						}
                    },
                    selectionchange (val) {
                        this.selected = val;
                        if (val.length > 0) {
                            this.selectid = val[0].typeid
                        } else {
                            this.selectid = ''
                        }
                    },
                    handleSizeChange (val) {
                        this.pagesize = val;
                        this.pageindex = 1;
                        this.getCgjhListData()
                    },
                    handleCurrentChange (val) {
                        this.pageindex = val;
                        this.getCgjhListData()
                    },
                    getCgjhListData () {
                        var that = this
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
			                    'Content-Type': 'application/json'
                            },
                            url: baseUrl + '/ConstructionPlan/GetCompanyDimissUser',
                            data: JSON.stringify({
                                projectId: that.projectId,
                                page: that.pageindex,
                                pageSize: that.pagesize
                            }),
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                for (var i = 0; i < res.data.length; i++) {
                                    res.data[i].typeid = i + 1
                                }
                                that.tableData = res.data
                                that.totals = res.total
                            }
                        });
                    }
				},
				mounted() {
                    var that = this;
                    this.showApp = true;
                    setTimeout(function () {
						var aa = that.$refs.paginations.offsetHeight;
						var ss = 'calc(100% - ' + aa + 'px)';
						that.$refs.tablebox.style.height = ss;
                    }, 2);
                    this.getCgjhListData()
                    // getQuerys()
				}
			});
		</script>
	</body>
	<style>
        .page-container {
            padding: 20px;
        }
		/* 按钮 */
        .top_but_box {
            display: flex;
            padding: 16px 0;
        }
        .top_but_box .el-button {
            padding: 0;
            margin: 0;
            height: 32px;
            background: transparent;
            border: 1px solid #5574D7;
            border-radius: 5px;
            margin-right: 20px;
        }
        .top_but_box .but_cont {
            display: flex;
            padding: 0 16px;
            color: #5574D7;
            align-items: center;
        }
        .top_but_box .but_cont .but_txt {
            margin-left: 10px;
        }

        .top_but_box .el-button:focus, .top_but_box .el-button:hover {
            color: rgba(85, 116, 215, 1);
            border-color: rgba(85, 116, 215, 0.1);
            background-color: #ecf5ff;
        }
        .top_but_box .el-button:focus .but_cont, .top_but_box .el-button:hover .but_cont{
            color:rgba(85, 116, 215, 0.8);
        }
        .top_but_box .el-button:active {
            color:rgba(85, 116, 215, 0.8);
            border-color:rgba(85, 116, 215, 0.8);
            outline: none;
        }
        .top_but_box .el-button:active .but_cont{
            color:rgba(85, 116, 215, 0.8);
        }
        /* 分页 */
        .pagination_box {
            padding: 2.7vh 0 3.7vh;
        }
        .el-pagination {
            display: flex;
            justify-content: center;
        }
        .pagination_box .el-pagination button {
            border: 1px solid #D6D6D6;
            border-radius: 5px!important;
            background-color: transparent!important;
        }
        .pagination_box .el-pager li {
            border-radius: 5px!important;
            border: 1px solid #D6D6D6!important;
            background: transparent!important;
        }
        .el-pagination.is-background .el-pager li:not(.disabled):hover {
            color:#5574D7;
        }
        .el-pagination.is-background .el-pager li:not(.disabled).active {
            background:#5574D7!important;
            border: none!important;
            color: #fff;
        }
        /* 表格 */
        .el-table th.gutter{
            display: table-cell!important;
        }
        .el-table--striped .el-table__body tr.el-table__row--striped td {
            background: #f8f8f8;
        }
        .el-table th{
            background: linear-gradient(0deg, #F5F7FA, #ECEFF6, #F5F7FA);
        }
        .table_th {
            box-shadow: 0px 1px 1px 0px rgba(234, 235, 240, 0.75), 0px 1px 1px 0px #F7F8FA;
        }
        .el-table td, .el-table th{
            color: #333333;
            padding: 0;
            height: 32px;
        }
        .el-tooltip__popper.is-dark {
            background: #FFFFFF;
            color: #333333;
            box-shadow: 0px 1px 8px 0px rgba(97, 97, 97, 0.6);
        }
        .el-tooltip__popper[x-placement^=top] .popper__arrow::after {
            border-top-color: #FFFFFF;
        }
        .el-tooltip__popper[x-placement^=top] .popper__arrow {
            border-top-color: #FFFFFF;
        }
        .el-table--border:after,.el-table--group:after,.el-table:before {
            background-color: #E2E2E2;
        }
        .el-table--border,.el-table--group {
            border-color: #E2E2E2;
        }
        .el-table td,.el-table th.is-leaf {
            border-bottom: 1px solid #E2E2E2;
        }

        .el-table--border th,.el-table--border th.gutter:last-of-type {
            border-bottom: 1px solid #E2E2E2;
        }
        .el-table--border td,.el-table--border th {
            border-right: 1px solid #E2E2E2;
        }
        .success-row td{
            background: #ffffff!important;
        }
        .warning-row td{
            background: #F8F8F8!important;
        }
        .selected-row td{
            background: rgba(85, 116, 215, 0.1)!important;
        }
	</style>
</html>
